<template>
    <view class="y">
        <view class="czjz" @click="suo()" style="width: 90%; height: 100rpx;margin: auto;">
            <uni-easyinput placeholder="点击前往搜索"></uni-easyinput>
        </view>
        <!-- 轮播图 -->
        <div class="shang-a">
            <div style="height: 180px;border-radius: 5px; width: 100%;">
                <!--:autoplay="true"用于显示轮播图播放   indicator-dots设置下面小圆点用来点击
                interval="3000"设置轮播图间隔时间 -->
                <swiper indicator-dots :autoplay="true" interval="3000">
                    <!-- v-for循环遍历数组 -->
                    <swiper-item v-for="item in lunbotu">
                        <image :src="item.url"></image>
                    </swiper-item>
                </swiper>
            </div>
        </div>
        <!--一级分类列表 -->
        <view class="z" style="width: 100%;margin-top: 10rpx;">
            <view class="x f" style="flex-wrap: wrap;width: 95%; background: #ffffff;height: 260rpx;">
                <div v-for="(item,index) in fenlei" :key="index" style="width: 16%; column;" @click="yiji(item.id)">
                    <!-- 分类图标 -->
                    <div class="z">
                        <img :src="item.iconUrl" style="width: 35rpx;height: 35rpx;" />
                    </div>
                    <!-- 分类名称 -->
                    <div class="z">{{item.name}}</div>
                </div>
            </view>
        </view>
        <!-- 优惠券区 -->
        <view style="margin-top: 40rpx;">
            <!-- 优惠券金额/名称/使用限制 -->
            <div class="z f y" style="width: 95%;height: 500rpx; background: #ffffff;margin: auto;">
                <div style="display: flex;justify-content: flex-start;width: 90%;margin-top: 20rpx;">优惠券</div>
                <div v-for="(item,index) in youhui" :key="index" class="y" style="padding-top: 30rpx;border: red solid 2rpx;
                width: 90%;margin: auto;">
                    <div class="y s" style="height: 150rpx;">
                        <div class="x s" style="width: 60%;">
                            <!-- 优惠券金额 -->
                            <div class="z f " style="color: red;">
                                ￥<p style="font-size: 50rpx;">{{item.discount}}元</p>
                            </div>
                            <!-- 名称 -->
                            <div class="z f">
                                {{item.name}}
                            </div>
                        </div>
                        <!-- 使用限制 -->
                        <div class="z y" style="color: #b7b7b7;font-size: 30rpx;width: 38%;">
                            {{item.desc}}-{{item.tag}}
                        </div>
                    </div>
                </div>
            </div>
        </view>
        <!-- 团购专区 -->
        <view style="margin-top: 40rpx;">
            <div style="width: 95%;background: #ffffff;margin: auto;">
                <view class="x hxfx1 czjz" style="height: 100rpx;width: 95%;margin: auto;">
                    <p>团购专区</p>
                    <p style="color: #a5a5a5;" @click="tgzhuanqu">更多团购商品></p>
                </view>
                <div v-for="(item,index) in tuango" :key="index">
                    <div class="x" style="padding-top: 40rpx;">
                        <!-- 商品图片 -->
                        <div @click="xiangqingye(item.id)">
                            <img :src="item.picUrl" style="width: 200rpx;height: 180rpx;" />
                        </div>
                        <!-- 商品-名称/介绍/拼团/满减/价格 -->
                        <div style="margin-left: 30rpx;">
                            <div style="font-size: 30rpx;">{{item.name}}</div> <!-- 名称 -->
                            <div style="font-size: 30rpx;">{{item.brief}}</div> <!-- 介绍 -->
                            <div style="font-size: 25rpx;padding-top: 10rpx;">
                                <span style="border: blue solid 3rpx;color: blue;">{{item.grouponMember}}人成团</span>
                                <span style="border: red solid 3rpx; color: red;">{{item.grouponDiscount}}元再减</span>
                            </div>
                            <div style="font-size: 29rpx;margin-top: 20rpx;">
                                <!-- 现价 -->
                                <span>
                                    <span style="font-size: 25rpx;" class="">￥</span>
                                    {{item.grouponDiscount}}
                                    <span style="font-size: 25rpx;">.00</span>
                                </span>
                                <!-- 原价 -->
                                <span class="yuanjia">
                                    {{item.grouponDiscount}}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </view>
        <!-- 品牌直供 -->
        <view class="x spjz" style="margin-top: 40rpx;">
            <!-- 品牌图片/名称 -->
            <view style="flex-wrap: wrap;background: #ffffff;" class="x">
                <view class="x czjz hxfx1" style="width: 95%; height: 100rpx;margin: auto;">
                    <p>品牌直供</p>
                    <p style="color: #a5a5a5;" @click="ppzhigong">更多品牌商></p>
                </view>
                <view v-for="(item,index) in pinpai" :key="index" style="width: 370rpx;height: 260rpx;
                margin-top: 20rpx;">
                    <view class="spjz">
                        <image :src="item.picUrl" mode="aspectFill" style="width: 300rpx;height: 200rpx;"></image>
                    </view>
                    <view class="spjz">{{item.name}}</view>
                </view>
            </view>
        </view>
        <!-- 新品首发 -->
        <view class="x spjz" style="margin-top: 40rpx;">
            <!-- 商品图片/名称/价格 -->
            <view class="x splb">
                <view class="x hxfx1 czjz" style="width: 95%;height: 100rpx;margin: auto;">
                    <p>新品首发</p>
                    <p style="color: #a5a5a5;" @click="xpshofa">更多新品首发></p>
                </view>
                <view v-for="(item,index) in xinpin" :key="index" style="width: 370rpx;">
                    <!-- 图片 -->
                    <view class="spjz">
                        <image :src="item.picUrl" style="width: 330rpx;height: 300rpx;"></image>
                    </view>
                    <view class="mcjg">
                        <!-- 名称 -->
                        <view class="spjz">{{item.name}}</view>
                        <!-- 价格 -->
                        <view class="spjz jg">￥{{item.retailPrice}}</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 人气推荐 -->
        <view class="y">
            <!-- 商品图片/名称/介绍/价格 -->
            <view class="" style="background: #ffffff;margin-top: 40rpx;">
                <view class="x hxfx1 czjz" style="width: 95%;height: 100rpx;margin: auto;">
                    <p>人气推荐</p>
                    <p style="color: #a5a5a5;" @click="rqtuijian">更多人气推荐></p>
                </view>
                <view v-for="(item,index) in renqi" :key="index" class="x">
                    <!-- 图片 -->
                    <view class="">
                        <image :src="item.picUrl" mode="" style="width: 200rpx;height: 200rpx;"></image>
                    </view>
                    <view class="zxfx1" style="height: 150rpx;">
                        <!-- 名称/介绍 -->
                        <view style="font-size: 30rpx;">
                            <view class="">{{item.name}}</view>
                            <view class="">{{item.brief}}</view>
                        </view>
                        <!-- 价格 -->
                        <view class="">
                            <span>
                                <span style="font-size: 25rpx;">￥</span>
                                {{item.retailPrice}}
                                <span style="font-size: 25rpx;">.00</span>
                            </span>
                            <span class="yuanjia">
                                {{item.counterPrice}}
                            </span>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 专题精选 -->
        <view class="x">
            <view class="x huanhuang spcz zhuanti">
                <view class="x hxfx1 czjz" style="width: 95%;height: 100rpx;margin: auto;
                 border-bottom: #cacaca 1rpx solid;">
                    <p>专题精选</p>
                    <p style="color: #a5a5a5;" @click="ztjingxuan">多更专题精选></p>
                </view>
                <view v-for="(item,index) in zhuanti" :key="index" style="width: 50%" class="y spcz zhuanti3">
                    <image :src="item.picUrl" mode="" :class="sstt[index]"></image>
                    <view class="zhuanti1 spjz">{{item.title}}</view>
                    <view class="zhuanti2 spjz">{{item.subtitle}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {

        data() {
            return {
                lunbotu: [], //存储轮播图数据
                fenlei: [], //一级分类列表
                youhui: [], //优惠券列表
                tuango: [], //团购商品
                pinpai: [], // 品牌
                xinpin: [], //新品首发
                renqi: [], //人气推荐
                zhuanti: [], // 专题精选
                sstt: [
                    "hh1",
                    "hh2",
                    "hh2",
                    "hh1",
                ]
            }
        },
        onLoad() {
            uni.request({
                url: "http://47.91.230.137:8086/wx/home/index",
                success: (res) => {
                    this.lunbotu = res.data.data.banner
                    this.fenlei = res.data.data.channel
                    this.youhui = res.data.data.couponList
                    this.tuango = res.data.data.grouponList
                    this.pinpai = res.data.data.brandList
                    this.xinpin = res.data.data.newGoodsList
                    this.renqi = res.data.data.hotGoodsList
                    this.zhuanti = res.data.data.topicList
                }
            })
        },
        methods: {
            suo() {
                uni.navigateTo({
                    url: '/pages/index/sosuo'
                })
            },
            yiji(id) {
                uni.request({
                    url: 'http://47.91.230.137:8086/wx/goods/category?id=' + id,
                    method: "GET",
                    success: (res) => {
                        console.log(res)
                        uni.navigateTo({
                            url: '/pages/yijifenlei/yijifenlei?id=' + id,
                        })
                    }
                })
            },
            xiangqingye(id) {
                uni.navigateTo({
                    url: '/pages/tgxiangqing/tgxiangqing?id=' + id
                })
            },
            tgzhuanqu() {
                uni.navigateTo({
                    url: '/pages/tgzhuanqu/tgzhuanqu'
                })
            },
            ppzhigong() {
                uni.navigateTo({
                    url: '/pages/ppzhigong/ppzhigong'
                })
            },
            xpshofa() {
                uni.navigateTo({
                    url: '/pages/xpshofa/xpshofa'
                })
            },
            rqtuijian() {
                uni.navigateTo({
                    url: '/pages/rqtuijian/rqtuijian'
                })
            },
            ztjingxuan() {
                uni.navigateTo({
                    url: '/pages/ztjingxuan/ztjingxuan'
                })
            }
        }
    }
</script>v

<style>
    html {
        background: #f1f1f1;
    }

    .z {
        display: flex;
        justify-content: center;
    }

    .f {
        display: flex;
        align-items: center;
    }

    .s {
        display: flex;
        justify-content: space-around;
    }

    .shang-a {
        width: 100%;
        height: 100%;
        background-color: #ececec;
        position: relative;

    }

    image {
        width: 100%;
    }

    swiper {
        width: 100%;
        height: 180px;
    }

    .hh1 {
        width: 154px;
        height: 80px;

    }

    .hh2 {
        width: 154px;
        height: 150px;

    }

    .zhuanti1 {
        font-size: 28rpx;
        width: 160px;
        color: #dd7f49;
    }

    .zhuanti2 {
        font-size: 22rpx;
        width: 160px;
        color: #dd7f49;
    }

    .zhuanti {
        background: #ffffff;
        margin-top: 40rpx;
        padding-bottom: 50rpx;
    }

    .zhuanti3 {
        margin-top: 30rpx;
    }

    .mcjg {
        font-size: 28rpx;
    }

    .jg {
        color: #dd7f49;
    }

    .splb {
        background: #ffffff;
        flex-wrap: wrap;
        padding-bottom: 35rpx;
    }

    .yuanjia {
        margin-left: 15rpx;
        text-decoration: line-through;
        font-size: 25rpx;
        color: darkgrey;
    }
</style>